<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
          title="登录"
          left-arrow
          @click-left="$router.back()"
      />
    </header>
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
            v-model="loginname"
            name="loginname"
            placeholder="用户名/手机号"
            clearable
            :rules="[{ required: true, message: '请填写用户名/手机号' }]"
        />

        <van-field
            v-model="password"
            :type="type"
            name="password"
            placeholder="请输入8-20位登录密码"
            :right-icon="rightIcon"
            @click-right-icon="changeIcon"
            :rules="[{ required: true, message: '请输入8-20位登录密码' }]"
            clearable
        />
        <div style="margin:16px">
          <van-button :disabled="!flag" round block type="danger" native-type="submit">登录</van-button>
          <van-row>
            <van-col span="12">忘记密码</van-col>
            <van-col span="12" class="text">
              <router-link to="/register">快速注册</router-link>
            </van-col>
          </van-row>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Form, Field, Button, Toast, Col, Row } from 'vant'
import { mapActions } from 'vuex'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Col)
Vue.use(Row)
export default {
  data () {
    return {
      loginname: '',
      password: '',
      type: 'password',
      rightIcon: 'closed-eye',
      regPwd: /^[0-9A-Za-z]{8,20}$/
    }
  },
  methods: {
    ...mapActions({
      login: 'user/login'
    }),
    async onSubmit (content) {
      await this.login(content)
      this.$router.back()
    },
    changeIcon () {
      if (this.type === 'password') {
        this.type = 'text'
        this.rightIcon = 'eye-o'
      } else {
        this.type = 'password'
        this.rightIcon = 'closed-eye'
      }
    }
  },
  computed: {
    flag () {
      if (this.loginname.length >= 2 && this.regPwd.test(this.password)) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding-top: 100px;
  background: #fff;
}
.van-row{
  margin-top: 30px;
  font-size: 0.14rem;
  a{
    color: #000;
  }
}
.text{
  text-align: right;
}
</style>
